<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="reset"
					style="float:right;margin-right:10px;">重置</el-button>
				<el-button type="text" icon="el-icon-plus" @click="editProduct">新增报事</el-button>
			</div>
			<el-row :gutter="20">
				<div style="margin:0 20px;">
					<el-form-item label="报事单号" prop="no">
						<el-input v-model="queryParams.no" placeholder="请输入报事单号" clearable size="small"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="报事电话" prop="applyPhone">
						<el-input v-model="queryParams.applyPhone" placeholder="请输入报事电话" clearable size="small"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="分类" prop="applyCategory">
						<el-select v-model="queryParams.applyCategory" placeholder="请选择分类" clearable size="small">
							<el-option label="环境" value="环境"></el-option>
							<el-option label="事务" value="事务"></el-option>
							<el-option label="其他" value="其他"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商户编号" prop="applyHouse">
						<el-input v-model="queryParams.applyHouse" placeholder="请输入报事商户编号" clearable size="small"
							@keyup.enter.native="handleQuery" />
					</el-form-item>
					<el-form-item label="流程状态" prop="state">
						<el-select v-model="queryParams.state" placeholder="请选择流程状态" clearable size="small">
							<el-option label="已受理" value="已受理"></el-option>
							<el-option label="已完成" value="已完成"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="数据来源" prop="client">
						<el-select v-model="queryParams.client" placeholder="请选择数据来源" clearable size="small">
							<el-option label="PC" value="PC"></el-option>
							<el-option label="小程序" value="小程序"></el-option>
						</el-select>
					</el-form-item>
				</div>
			</el-row>
		</el-form>
		<el-table v-loading="loading" :data="list" border height="calc(100vh - 380px)">
			<el-table-column label="报事单号" align="center" prop="no" />
			<el-table-column label="报事标题" align="center" prop="title" />
			<el-table-column label="分类" align="center" prop="applyCategory"></el-table-column>
			<el-table-column label="报事电话" align="center" prop="applyPhone" />
			<el-table-column label="报事者姓名" align="center" prop="applyName" />
			<el-table-column label="报事时间" align="center" prop="applyTime" width="180"></el-table-column>
			<el-table-column label="流程状态" align="center" prop="state"></el-table-column>
			<el-table-column label="数据来源" align="center" prop="client"></el-table-column>
			<el-table-column label="操作" align="center" width="220" fixed="right">
				<template slot-scope="scope">
					<div class="centered-content">
						<el-button type="text" size="mini" class="editBtn" @click="editProduct(scope.row)">
							编辑
						</el-button>
						<el-button type="text" size="mini" class="deleteBtn" @click="delProduct(scope.row)">
							删除
						</el-button>
						<el-button type="text" size="mini" class="detailBtn" @click="lookProduct(scope.row)">
							详情
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 报事维护弹窗 -->
		<el-dialog title="报事维护" :visible.sync="productModel" :close-on-click-modal="false"
			:close-on-press-escape="false" width="40%">
			<el-form ref="form" :model="dataForm" :rules="rules" label-width="100px" :disabled="canEdit">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="数据来源" prop="client">
							<el-select v-model="dataForm.client" placeholder="请选择数据来源" clearable size="small">
								<el-option label="PC" value="PC"></el-option>
								<el-option label="小程序" value="小程序"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="报事分类" prop="applyCategory">
							<el-select v-model="dataForm.applyCategory" placeholder="请选择报事分类">
								<el-option label="环境" value="环境"></el-option>
								<el-option label="事务" value="事务"></el-option>
								<el-option label="其他" value="其他"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="20">
						<el-form-item label="商户编号" prop="applyHouse" v-if="dataForm.client != 'web_company'">
							<el-input v-model="dataForm.applyHouse" placeholder="房间编号" clearable
								:style="{ width: '100%' }"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="2">
						<el-button type="primary" @click="searchHouse()">搜索</el-button>
					</el-col>
					<el-col :span="12">
						<el-form-item label="报事人姓名" prop="applyName" :maxlength="20">
							<el-input v-model="dataForm.applyName" placeholder="请输入报事人姓名" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="报事人电话" prop="applyPhone" :maxlength="20">
							<el-input v-model="dataForm.applyPhone" placeholder="请输入报事人电话" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="报事人要求" prop="applyRequirements">
							<el-input v-model="dataForm.applyRequirements" placeholder="请输入报事人要求" :maxlength="200"
								:style="{ width: '100%' }" true type="textarea" :rows="3" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="报事内容" prop="applyContent">
							<el-input v-model="dataForm.applyContent" placeholder="请输入报事的内容说明" :maxlength="200"
								:style="{ width: '100%' }" true type="textarea" :rows="3" />
						</el-form-item>
					</el-col>
				</el-row>











				<!-- <el-form-item label="报事图片" prop="applyImg">
				    <imageUpload v-model="dataForm.applyImg" />
				</el-form-item> -->
			</el-form>
			<span slot="footer" class="dialog-footer" v-if="!canEdit">
				<el-button @click="productModel = false">取 消</el-button>
				<el-button type="primary" @click="submitProduct()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// 上传文件
	import {
		selectConfigFlowComplaintsBlock,
		insertConfigFlowComplaintsBlock,
		editConfigFlowComplaintsBlock,
		deleteConfigFlowComplaintsBlock,
		selectConfigHouseBlock
	} from '@/api/wuye.js'
	import fileUpdata from '@/api/file.config'
	export default {
		name: "wuyefei",
		// 页面数据
		data() {
			return {
				queryParams: {
					currentPage: 1,
					pageSize: 10,
					instanceId: null,
					no: null,
					title: null,
					applyPhone: null,
					applyName: null,
					applyCategory: null,
					applyContent: null,
					applyHouse: null,
					applyTime: null,
					applyImg: null,
					appContent: null,
					appointmentTime: null,
					appTime: null,
					assigneeUser: null,
					assigneeContent: null,
					returnState: null,
					returnResult: null,
					returnRemark: null,
					endTime: null,
					state: null,
					client: null,
				},
				houseList: [],
				dataForm: {
					name: '',
					price: '',
					numType: ''
				},
				editId: '',
				loading: false,
				list: [],
				total: 0, // 一共多少条数据
				productModel: false,
				rules: {
					client: [{
						required: true,
						message: '请选择报事数据来源',
						trigger: 'blur'
					}],
					applyHouse: [{
						required: true,
						message: '请选择房间编号',
						trigger: 'blur'
					}],
					applyPhone: [{
							required: true,
							message: '报事电话不能为空',
							trigger: 'blur'
						},
						{
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							message: '请输入正确的手机号码',
							trigger: 'blur'
						},
					],
					applyName: [{
						required: true,
						message: '申请人姓名不能为空',
						trigger: 'blur'
					}],
					applyCategory: [{
						required: true,
						message: '报事分类不能为空',
						trigger: 'change'
					}],
					applyContent: [{
						required: true,
						message: '报事的内容不能为空',
						trigger: 'blur'
					}],
				},
				typeOptions: [{
						fullName: '常规收费项（商铺）',
						id: 'house'
					},
					{
						fullName: '临时收费项',
						id: 'temp'
					},
					{
						fullName: '押金类收费项',
						id: 'deposit'
					},
				],
				canEdit: false
			};
		},
		// 初始化
		mounted() {
			this.getList();
		},
		// 函数集合
		methods: {
			lookProduct(row) {
				this.canEdit = true;
				this.dataForm = row;
				this.productModel = true;
			},
			searchHouse() {
				selectConfigHouseBlock({
					name: this.dataForm.applyHouse
				}).then(res => {
					this.houseList = res.rows;
				})
			},
			// 修改报事
			editProduct(row) {
				this.editId = row.id
				this.canEdit = false;
				if (row.id) {
					// 修改
					this.dataForm = row;
				} else {
					// 新增
					this.dataForm = {};
				}
				console.log('dataForm', this.dataForm)
				this.productModel = true;
			},
			// 删除报事
			delProduct(row) {
				this.$confirm("是否删除？", "提示", {
						confirmButtonText: "确 认",
						cancelButtonText: "取 消"
					}).then(() => {
						deleteConfigFlowComplaintsBlock({
							...row
						}).then(res => {
							if (res.code == 200) {
								this.$message({
									message: res.msg,
									type: 'success',
									duration: 1000,
									onClose: () => {
										this.visible = false;
										this.$message.success("删除报事成功");
										this.getList();
									},
								});
							}
						})
					})
					.catch(() => console.info("操作取消"));
			},
			//提交报事
			submitProduct() {
				this.dataForm.state = "已派工";
				this.$refs['form'].validate(valid => {
					if (valid) {
						if (this.editId) {
							editConfigFlowComplaintsBlock({
								...this.dataForm
							}).then(res => {
								if (res.code == 200) {
									this.$message({
										message: res.msg,
										type: 'success',
										duration: 1000,
										onClose: () => {
											this.productModel = false;
											this.getList();
										},
									});
								}
							})
						} else {
							insertConfigFlowComplaintsBlock({
								...this.dataForm
							}).then(res => {
								if (res.code == 200) {
									this.$message({
										message: res.msg,
										type: 'success',
										duration: 1000,
										onClose: () => {
											this.productModel = false;
											this.getList();
										},
									});
								}
							})
						}
					}
				})

			},
			//初始化列表
			getList() {
				this.loading = false;
				selectConfigFlowComplaintsBlock({
					...this.queryParams
				}).then(res => {
					this.list = res.rows;
					this.total = res.total
				})
			},
			reset() {
				this.queryParams = {
					id: null,
					no: null,
					title: null,
					applyPhone: null,
					applyName: null,
					applyCategory: null,
					applyContent: null,
					applyHouse: null,
					applyTime: null,
					applyImg: null,
					state: null,
					client: 'web_company',
					remark: null,
				};
				this.resetForm('form');
			},

		}
	}
</script>
<style scoped lang='scss'>
	.editBtn span {
		color: red;
	}

	.deleteBtn span {
		color: red;
	}

	.detailBtn span {
		color: red;
	}

	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 100%;
	}

	.detailForm {
		.el-form-item {
			margin-bottom: 0px;
		}
	}

	.centered-content {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>